<template>
  <!-- 银行选择弹框 -->
  <uni-popup ref="bankPopup" type="bottom">
    <view class="bank-picker-modal">
      <view class="picker-header">
        <text class="picker-title">选择开户银行</text>
        <uni-icons
          type="closeempty"
          size="20"
          color="#999"
          class="close-icon"
          @click="close"
        ></uni-icons>
      </view>

      <!-- 搜索框 -->
      <view class="search-box">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <input
          v-model="searchKeyword"
          class="search-input"
          placeholder="搜索开户银行"
          placeholder-style="color: #999"
          @input="handleSearch"
        />
      </view>

      <!-- 银行列表 -->
      <scroll-view class="bank-list" scroll-y>
        <view
          v-for="bank in filteredBanks"
          :key="bank.id"
          class="bank-item"
          :class="{ selected: tempSelectedBank?.id === bank.id }"
          @click="selectBank(bank)"
        >
          <text class="bank-name">{{ bank.name }}</text>
          <view v-if="tempSelectedBank?.id === bank.id" class="check-icon">
            <uni-icons
              type="checkbox-filled"
              size="20"
              color="#FFA726"
            ></uni-icons>
          </view>
        </view>
        <view v-if="filteredBanks.length === 0" class="empty-tip">
          <text>暂无匹配的银行</text>
        </view>
      </scroll-view>

      <!-- 底部按钮 -->
      <view class="footer-buttons">
        <view class="btn-reset" @click="reset">重置</view>
        <view class="btn-confirm" @click="confirm">确认</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:modelValue", "confirm"]);

// 弹框引用
const bankPopup = ref(null);

// 搜索关键词
const searchKeyword = ref("");

// 选中的银行
const selectedBank = ref(null);

// 临时选中的银行
const tempSelectedBank = ref(null);

// 银行列表数据
const bankList = ref([
  { id: 1, name: "广西龙胜农村商业银行股份有限公司" },
  { id: 2, name: "营口沿海银行股份有限公司" },
  { id: 3, name: "TCL集团财务有限公司" },
  { id: 4, name: "一汽财务有限公司" },
  { id: 5, name: "七台河市区农村信用合作联社" },
  { id: 6, name: "万向财务有限公司" },
  { id: 7, name: "万宁国民村镇银行有限责任公司" },
  { id: 8, name: "中国工商银行" },
  { id: 9, name: "中国农业银行" },
  { id: 10, name: "中国银行" },
  { id: 11, name: "中国建设银行" },
  { id: 12, name: "交通银行" },
  { id: 13, name: "中国邮政储蓄银行" },
  { id: 14, name: "招商银行" },
  { id: 15, name: "中信银行" },
  { id: 16, name: "中国光大银行" },
  { id: 17, name: "中国民生银行" },
  { id: 18, name: "平安银行" },
  { id: 19, name: "华夏银行" },
  { id: 20, name: "广发银行" },
  { id: 21, name: "兴业银行" },
  { id: 22, name: "浦发银行" },
  { id: 23, name: "恒丰银行" },
  { id: 24, name: "渤海银行" },
  { id: 25, name: "浙商银行" },
  { id: 26, name: "北京银行" },
  { id: 27, name: "上海银行" },
  { id: 28, name: "江苏银行" },
  { id: 29, name: "南京银行" },
  { id: 30, name: "杭州银行" },
  { id: 31, name: "宁波银行" },
  { id: 32, name: "徽商银行" },
  { id: 33, name: "长沙银行" },
  { id: 34, name: "江西银行" },
  { id: 35, name: "齐鲁银行" },
  { id: 36, name: "广州银行" },
  { id: 37, name: "重庆银行" },
  { id: 38, name: "成都银行" },
  { id: 39, name: "天津银行" },
  { id: 40, name: "哈尔滨银行" },
  { id: 41, name: "大连银行" },
  { id: 42, name: "郑州银行" },
  { id: 43, name: "西安银行" },
  { id: 44, name: "青岛银行" },
  { id: 45, name: "东莞银行" },
  { id: 46, name: "厦门银行" },
  { id: 47, name: "福建海峡银行" },
  { id: 48, name: "桂林银行" },
  { id: 49, name: "贵阳银行" },
  { id: 50, name: "昆明银行" },
  { id: 51, name: "兰州银行" },
  { id: 52, name: "乌鲁木齐银行" },
  { id: 53, name: "沈阳银行" },
  { id: 54, name: "苏州银行" },
  { id: 55, name: "温州银行" },
  { id: 56, name: "台州银行" },
  { id: 57, name: "绍兴银行" },
  { id: 58, name: "湖州银行" },
  { id: 59, name: "嘉兴银行" },
  { id: 60, name: "泰隆商业银行" },
]);

// 过滤后的银行列表
const filteredBanks = computed(() => {
  if (!searchKeyword.value) {
    return bankList.value;
  }
  return bankList.value.filter((bank) =>
    bank.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
  );
});

// 对外暴露方法
const open = () => {
  // 根据传入的值设置选中状态
  if (props.modelValue) {
    const bank = bankList.value.find((b) => b.name === props.modelValue);
    selectedBank.value = bank || null;
    tempSelectedBank.value = bank || null;
  } else {
    selectedBank.value = null;
    tempSelectedBank.value = null;
  }
  searchKeyword.value = "";
  bankPopup.value?.open();
};

const close = () => {
  bankPopup.value?.close();
};

defineExpose({ open, close });

// 搜索处理
const handleSearch = () => {
  // 搜索逻辑已在 computed 中实现
};

// 选择银行
const selectBank = (bank) => {
  tempSelectedBank.value = bank;
};

// 重置
const reset = () => {
  tempSelectedBank.value = null;
  searchKeyword.value = "";
};

// 确认
const confirm = () => {
  selectedBank.value = tempSelectedBank.value;
  const bankName = tempSelectedBank.value?.name || "";
  emit("update:modelValue", bankName);
  emit("confirm", bankName);
  close();
};
</script>

<style lang="scss" scoped>
.bank-picker-modal {
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
}

.picker-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.close-icon {
  position: absolute;
  right: 32rpx;
  top: 50%;
  transform: translateY(-50%);
}

.search-box {
  margin: 24rpx 32rpx;
  padding: 16rpx 24rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  height: 40rpx;
  line-height: 40rpx;
}

.bank-list {
  flex: 1;
  overflow-y: auto;
  min-height: 400rpx;
  max-height: 800rpx;
}

.bank-item {
  padding: 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s;

  &:active {
    background-color: #f9f9f9;
  }

  &.selected {
    background-color: #fff7f0;
  }
}

.bank-name {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.check-icon {
  margin-left: 16rpx;
}

.empty-tip {
  padding: 80rpx 0;
  text-align: center;

  text {
    font-size: 28rpx;
    color: #999;
  }
}

.footer-buttons {
  display: flex;
  gap: 24rpx;
  padding: 24rpx 32rpx;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #f5f5f5;
  background: #fff;
}

.btn-reset,
.btn-confirm {
  flex: 1;
  height: 88rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 500;
}

.btn-reset {
  background: #fff;
  border: 1rpx solid #ffa726;
  color: #ffa726;
}

.btn-confirm {
  background: #ffa726;
  color: #fff;
}
</style>
